<template>
	<view class="container" :style="{backgroundImage:'url(' + imageURL + ')', paddingTop: barHeight + 'px'}">
		<view class="bar" :style="{height: barHeight + 'px', backgroundColor: 'rgba(255, 255, 255,' + headerOpacity +')'}">
			<view class="back" @click="back">
				<image src="/static/arrow-down-s-line.png" mode="" :style="{filter: 'contrast(' + (headerOpacity > 0 ? '0' : '5') + ')'}"></image>
			</view>
		</view>
		<view class="title1">“我参与<text>·</text>齐创建<text>·</text>共文明”</view>
		<view class="title2">文明城市创建知识问答</view>
		<view class="form">
			<view class="form_title">在线答题</view>
			<view class="form_content" v-for="(item, index) in list" :key="index">
				<view class="form_item">
					<view class="label">
						<text class="required">*</text>
						<view class="">
							<text>{{index >= 9 ? index+1 : '0' + (index+1)}}</text>
							<text class="type">【{{ item.type == 1 ? '单选' : '' }}】</text>
							<text>{{ item.question }}</text>
							<text class="error" v-if="item.ans != item.right_answer">(回答错误)</text>
						</view>
					</view>
					<view class="checkbox_group">
						<view class="item" v-for="(itemn, indexn) in item.options" :key="indexn" @click="selectOption(index, itemn)">
							<text class="checkbox" :class="item.answer == itemn.key ? 'on' : ''"></text>
							<text>{{ itemn.value }}</text>
							<text class="success" v-if="item.ans != item.right_answer && item.right_answer == itemn.key">(正确答案)</text>
						</view>
					</view>
					<!-- <view class="" style="padding-left: 20rpx; padding-top: 30rpx;">
						<view class="" style="margin-bottom: 20rpx;">
							<text>您的答案：{{ getKey(item.options, item.ans) }}</text>
						</view>
						<view class="">
							<text>正确答案：{{ getKey(item.options, item.right_answer) }}</text>
						</view>
					</view> -->
				</view>
			</view>
			<button class="submitBtn" @click="onSubmit">交卷</button>
		</view>
	</view>
</template>

<script>
	import bgBase64 from '@/common/bg.js'
	import { getQuestionListApi, submitAnswerApi, getAnswerResultApi } from '@/api/api.js'
	export default {
		data() {
			return {
				imageURL: bgBase64,
				barHeight: 0,
				headerOpacity: 0,
				list: [],
				timestamp: '',
				answerList: [],
				answerId: ''
			}
		},
		onLoad(option) {
			if(option.id) {
				this.answerId = option.id
				this.getAnswer(option.id)
			}
			this.getSysInfo()
			this.timestamp = (new Date().getTime()/1000).toString()
		},
		methods: {
			getAnswer(id) {
				getAnswerResultApi({id}).then(res => {
					res.data.answerjson.map(el => {
						el.answer = el.ans
					})
					this.list = res.data.answerjson
				})
			},
			getKey(arr, val) {
				let index = arr.findIndex(el => el.key == val)
				return arr[index].value
			},
			back() {
				uni.navigateBack()
			},
			getSysInfo() {
				uni.getSystemInfo({
					success: (e) => {
						let custom = uni.getMenuButtonBoundingClientRect();
						this.barHeight = custom.bottom + custom.top - e.statusBarHeight;
					}
				})
			},
			selectOption(index, itemn) {
				this.list[index].answer = itemn.key
			},
			onSubmit() {
				let params = [];
				let count = 0;
				this.list.map(el => {
					params.push({
						id: el.qid,
						answer: el.answer
					})
					if(!el.answer) count++
				})
				if(count > 0) return uni.showToast({
					title: '请答完所有题目后再交卷',
					icon: 'none'
				})
				submitAnswerApi({
					answer: JSON.stringify(params),
					begintime: this.timestamp
				}).then(res => {
					console.log(res)
					uni.navigateTo({
						url: '/pages/index/score'
					})
				})
			}
		},
		onPageScroll (e) {
			//导航栏渐变
			let tmpY = 50;
			e.scrollTop = e.scrollTop > tmpY ? 150 : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		}
	}
</script>
<style>
	page {
		background-color: #f1f5fc;
	}
</style>
<style scoped lang="scss">
.container {
	position: relative;
	width: 100%;
	height: 37vh;
	background-size: 100%;
	background-repeat: no-repeat;
	box-sizing: border-box;
	.bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		height: 100%;
		display: flex;
		align-items: flex-end;
		padding-left: 20rpx;
		.back {
			image {
				display: block;
				transform: rotate(90deg) translateX(-20rpx);
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	.title1, .title2 {
		font-size: 48rpx;
		color: #1f0b77;
		font-weight: 700;
	}
	.title1 {
		padding-top: 40rpx;
		margin-bottom: 10rpx;
		padding-left: 20rpx;
		text {
			margin: 0 5rpx;
		}
	}
	.title2 {
		padding-left: 1em;
	}
	.form {
		padding: 30rpx;
		margin-top: 115rpx;
		&_title {
			font-size: 36rpx;
			padding: 0 0 20rpx 40rpx;
		}
		&_content {
			padding: 40rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			.form_item {
				.required {
					color: #f00;
					font-size: 40rpx;
					display: block;
					transform: translateY(-5px);
					padding-right: 2rpx;
				}
				.type {
					color: #447df3;
				}
				.checkbox_group {
					padding-left: 20rpx;
					.checkbox {
						display: inline-block;
						width: 30rpx;
						height: 30rpx;
						border: 1px solid #707070;
						border-radius: 8rpx;
						margin-right: 15rpx;
					}
					.checkbox.on {
						background-color: #447df3;
						border-color: #447df3;
					}
					.item {
						display: flex;
						align-items: center;
						&:not(:last-child) {
							margin-bottom: 30rpx;
						}
					}
				}
			}
			.label {
				display: flex;
				margin-bottom: 30rpx;
			}
		}
		.submitBtn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #447df3;
			color: #fff;
			font-weight: 700;
			font-size: 34rpx;
			margin-top: 120rpx;
			margin-bottom: 45rpx;
		}
		.success {
			color: #67c23a;
			margin-left: 10rpx;
		}
		.error {
			color: #f56c6c;
		}
	}
}
</style>
